<template>
  <div class="b-tabbed-panel">
    <el-tabs v-model="activeName" type="card">
      <scene></scene>
      <project></project>
      <setting></setting>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ElTabs } from 'element-plus'
import scene from './scene/index.vue'
import project from './project/index.vue'
import setting from './setting/index.vue'
import { ref } from 'vue'

const activeName = ref('scene')
</script>
<style lang="scss" scoped>
.b-tabbed-panel {
  height: 100%;
  overflow: hidden;
  ::v-deep(.el-tabs) {
    height: 100%;

    .el-tabs__header {
      background-color: var(--aside-background);
      border-color: var(--base-border);
      .el-tabs__nav {
        border-radius: 0;
        border-color: var(--input-background);
      }

      .el-tabs__item {
        border-color: var(--input-background);
        color: var(--base-color);
        transition: all 0.6s linear;

        &.is-active {
          color: var(--active-color);
          background-color: var(--input-background);
        }
      }
    }
  }
}
</style>
